<template>
	<view class="wechat">
		<view class="list">
			<view class="inp inps clearfix">
				<view class="left fl">切换账户</view>
				<view class="xuanze fr clearfix" v-if="formData.auto_switch">
					<view class="fir fl" @click="formData.auto_switch = true">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="sec fl" @click="formData.auto_switch = false">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
				<view class="xuanze fr clearfix" v-else>
					<view class="sec fl" @click="formData.auto_switch = true">
						<image src="../../../static/images/wxuanzhong.png"></image>
						<text>是</text>
					</view>
					<view class="fir fl" @click="formData.auto_switch = false">
						<image src="../../../static/images/xuanzhong.png"></image>
						<text>否</text>
					</view>
				</view>
			</view>
			<view class="inpacc inps">
				<view class="left">账号选择</view>
				<view class="account">
					<text v-for="(item,index) in accountList" :key="index"
						:class="{'active': listSelectList.indexOf(item.name) != -1 }"
						@click="selectList(item.name)">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="footer" @click="submit">
			开始AI微信
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				userData: [],
				accountList: [],
				listSelectList: [],
				formData: {
					auto_switch: true,
					account: [],
					user_id: '',
					team_id: '',
				}
			}
		},
		onLoad() {
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;
				
				this.formData.user_id = this.userData.id;
				this.formData.team_id = this.userData.team_id;

				// 抖音账号绑定
				this.getAccount();
			}).catch((error) => {});
		},
		methods: {
			submit(){
				this.formData.account = this.listSelectList;
				
				if(this.formData.auto_switch == true && this.listSelectList.length < 2){
					//多选
					uni.showToast({
						title: '至少选择两个账号',
						icon: 'none'
					})
					
					return;
				}
				
				console.log(this.formData)
			},
			getAccount() {
				request({
					url: '/api/user/cookielist',
					method: 'POST',
					data: {
						user_id: this.userData.id,
					},
				}).then((response) => {
					this.accountList = response.data.list;
				}).catch((error) => {});
			},
			selectList(e) {
				if(this.formData.auto_switch == true){
					if (this.listSelectList.indexOf(e) == -1) {
						this.listSelectList.push(e); // 选中添加到数组里(下标)
					} else {
						this.listSelectList.splice(this.listSelectList.indexOf(e), 1); // 取消
					}
				}else{
					this.listSelectList = [];
					
					this.listSelectList.push(e); // 选中添加到数组里(下标)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wechat {
		width: 100%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 60rpx;

		.list {
			width: 94%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			background: #242831;
			border-radius: 10rpx;

			.inp {
				width: 94%;
				margin: 0 auto;
				height: 88rpx;
				line-height: 88rpx;
				box-sizing: border-box;

				.left {
					width: 30%;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.right {
					width: 70%;

					.name {
						font-size: 30rpx;
						color: #ABB0CC;
						width: 90%;
						text-align: right;
					}

					.img {
						margin-right: 10rpx;
						width: 16rpx;
						height: 28rpx;
						margin-top: 30rpx;
					}

					.input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						text-align: right;
						color: #787B8F;
						margin-right: 10rpx;
						font-size: 28rpx;
					}
				}

				.xuanze {
					width: 40%;

					.fir {
						width: 50%;
						height: 88rpx;
						line-height: 88rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							margin-top: 28rpx;
							float: left;
						}

						text {
							display: inline-block;
							float: left;
							font-size: 30rpx;
							color: #ECDEA4;
						}
					}

					.sec {
						width: 50%;
						height: 88rpx;
						line-height: 88rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							margin-top: 28rpx;
							float: left;
						}

						text {
							display: inline-block;
							float: left;
							font-size: 30rpx;
							color: #ABB0CC;
						}
					}
				}
			}

			.inpacc {
				width: 94%;
				margin: 0 auto;

				.left {
					height: 88rpx;
					line-height: 88rpx;
					width: 30%;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.account {
					width: 100%;
					margin: 0 auto;

					text {
						display: inline-block;
						height: 60rpx;
						line-height: 60rpx;
						background: #242831;
						border: 2rpx solid #FFFFFF;
						border-radius: 5rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						padding: 0 26rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.active {
						background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
						color: #806B1A;
						border: 2rpx solid #EAC59F;
					}
				}
			}

			.inps {
				border-bottom: 1rpx solid #31353E;
			}
		}

		.footer {
			width: 94%;
			margin: 0 auto;
			position: fixed;
			left: 3%;
			bottom: 40rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
			color: #806B1A;
			font-size: 36rpx;
		}
	}
</style>